<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../include/base.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>欢迎使用CRM管理系统</title>
	    <link rel="stylesheet" href="${basePath }/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="${basePath }/css/colorPicker.css" type="text/css" />
    <link rel="stylesheet" href="${basePath }/css/style.css" type="text/css" />
    <script type="text/javascript" src="${basePath }/js/jquery.min.js"></script>
    <script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${basePath }/js/jquery.colorPicker.min.js"></script>
    <style type="text/css">
    </style>
</head>
<body>

	<div class="navbar">
		<div class="navbar-inner">
			<div class="container">
				<a href="${basePath }/message" class="brand">凯盛CRM管理系统</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li><a href="${basePath }/message">最新动态</a>
						</li>
						<li><a href="${basePath }/contacts/list">联系人</a>
						</li>
						<li class="active"><a href="${basePath }/task/list">日程安排</a>
						</li>
						<li><a href="${basePath }/deal/list">业务机会</a>
						</li>
					</ul>
					<ul class="nav pull-right">
						<li><a href="#">${user.username }</a>
						<li class="divider-vertical">&nbsp;</li>
						<li><a href="${basePath }/user/info">账号设置</a>
						</li>
						<li><a href="${basePath }/user/loginout">退出</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div id="content" class="container">
		<div class="span9">
			<ul class="breadcrumb" style="vertical-align:top">
				<li class="active">日程类型</li>				
			</ul>
			<div class="well">
				<form id="myform" class="form-horizontal" action="${basePath }/task/taskType-save" method="post">
					<fieldset>
						<div class="control-group" id="newTypeDiv">
                            <label class="control-label" for="name">类型</label>
                            <div class="controls">
                                <input id="newType" type="text" class="input-xlarge" name="type"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="name">颜色</label>
                            <div class="controls">
                                <input name="color" id="newColor" type="text" style="width:30px;"/>
                                <button id="btn" class="btn btn-primary" type="button">新增</button>
                            </div>
                        </div>
					</fieldset>
				</form>
				<table class="table">
					<c:forEach var="type" items="${taskType }">
						<tr>
							<td class="name" style="width:20%;text-align:center;">${type.type }</td>
							<td style="width:60%" class="color">
								<input name="color" type="text" value="${type.color }">
							</td>
							<td>
								<a rel="${type.id }" data-toggle="modal" href="#myModal" class="edit">编辑</a>
								<a href="${basePath }/task/taskType-del?id=${type.id}" rel="${type.id }" class="del">删除</a>
							</td>
						</tr>
					</c:forEach>
				</table>	
			</div>
		</div>
		<div class="span3" >
		
			<div class="box well" style="padding-top:0px">				
				 <div class="head">抓住时间</div>
                <div style="margin-left:10px;margin-right:10px;margin-bottom:10px;">“谁有时间进行规划？”
 			   无论有多忙，你都应该抽出时间进行规划。越是觉得自己没有时间，你越应该仔细地规划自己的时间。比如说你可以在每天开始或结束的时候抽出十分钟来进行规划——你将因此得到数倍的回报。 </div>
	        </div> 		
		</div>
	</div>
	<div class="modal hide fade" id="myModal">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">×</button>
			<h3>修改类型</h3>
		</div>
		<div class="modal-body">

			<form class="form-horizontal" action="${basePath }/task/taskType-save" method="post" id="edit-form">
				<fieldset>
					<div class="control-group" id="typeDiv">
						<input type="hidden" name="id" id="id">
						<label class="control-label">类型</label>
						<div class="controls">
							<input id="type" type="text" name="type"><br/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">颜色</label>
						<div class="controls">
							<input id="color" name="color" type="text" style="width:30px;">
						</div>
					</div>
				</fieldset>
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn" data-dismiss="modal">关闭</a> 
			<a href="#"class="btn btn-primary" id="submit-edit">保存</a>
		</div>
	</div>
	<script type="text/javascript">
	$(document).ready(function() {		
		$("input[name='color']").colorPicker();
		$(".colorPicker-picker").each(function(picker) {
			$(this).css({"background-color":$(this).siblings("input").val()});
		});	
		
		$(".edit").click(function() {
			var name = $(this).parent().siblings(".name").text();
			var color = $(this).parent().siblings(".color").children("input").val();
			var id = $(this).attr("rel");
			$("#type").val(name);
			$("#color").siblings(".colorPicker-picker").css({"background-color":color});
			$("#id").val(id);
		});
		$("#type").focus(function() {
			$("#typeDiv").removeClass("error");
		});
		$("#type").blur(function() {	
			if($(this).val().trim() == ""){
				$("#typeDiv").addClass("error");
			}
		});
		$("#submit-edit").click(function() {
			if($("#type").val().trim() =="") {
				$("#typeDiv").addClass("error");
			}else{
				$("#edit-form").submit();
			}
		});
		$("#newType").focus(function() {
			$("#newTypeDiv").removeClass("error");
		});
		$("#newType").blur(function() {	
			if($(this).val().trim() == ""){
				$("#newTypeDiv").addClass("error");
			}
		});
		$("#btn").click(function(){
			if($("#newType").val().trim() == ""){
				$("#newTypeDiv").addClass("error");		
			}else{
				$("#myform").submit();				
			}
		});
	});

	</script>
</body>
</html>